<template>
	<!-- 注册 -->
	<div class="register-container">
		<!-- 登录 -->
		<van-nav-bar title="注册" left-text="返回" left-arrow @click-left="back()" />

		<div class="input-container">
			<!-- 输入模块 -->
			<van-cell-group inset>
				<form>
					<!-- 账号名 / 电话号 -->
					<van-field v-model="account" type="text" label="账号" />
					<!-- 输入密码 -->
					<van-field v-model="password" type="text" label="密码" autocomplete="off" />
					<!-- 电话 -->
					<van-field v-model="phone" type="text" label="电话" />

					<van-field v-model="nick" type="text" label="昵称" />
					<van-cell title="性别" v-bind:value="sex" @click="selectSex()" />
					<van-cell title="生日" v-bind:value="birthday" @click="changeDate" />
					<van-cell title="头像">
						<van-uploader class="ic-head" v-model="headFile" accept="image/*" @oversize="onOversize"
							:max-count="1" multiple :before-read="beforeRead" :after-read="afterRead">
							<van-image type="primary" round :src="user.header" />
							<template #preview-cover="{ file }">
								<div class="preview-cover van-ellipsis">{{ file.name }}</div>
							</template>
						</van-uploader>
					</van-cell>
					<van-field v-model="desc" type="text" label="描述" />
					<van-field v-model="permission" type="text" label="权限" />
				</form>
			</van-cell-group>
		</div>

		<div class="btn-container">
			<van-button type="primary" block @click="register()">注册</van-button>
		</div>
		<!-- 底部弹出 -->
		<van-popup v-model:show="isShowDate" position="bottom">
			<van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
				@confirm="dataConfirm" @cancel="dataCancel" @change="dataChange" />
		</van-popup>

		<van-popup v-model:show="isShowSex" position="bottom">
			<van-date-picker :columns="sexList" title="选择性别" @confirm="sexConfirm" @cancel="sexCancel"
				@change="sexChange" />
		</van-popup>

	</div>
</template>

<script>
	import {
		showToast
	} from 'vant'
	import {
		ref
	} from 'vue'
	export default {
		data() {
			// {
			// 	"account":"admin", // 登录账号
			// 	"password" :"admin", // 登录密码
			// 	"header":"http://127.0.0.1:5001/images/head.jpeg", // 头像地址
			// 	"nick":"管理员", // 昵称
			// 	"desc":"管理员不需要自我介绍", // 自我描述
			// 	"birthday":"0000-00-00 00:00:00.000", // 生日 客户端 到日 即可
			// 	"permission": -1, // 权限 , 数值越小, 能力越大
			// 	"sex":0, // 性别: 0 没有设置; 1 男; 2 女
			// 	"phone":"0576-90090000" // 电话 可以用来登录
			// }
			return {
				"account": "",
				"password": "",
				"header": "http://127.0.0.1:5001/images/head.jpeg",
				"nick": "",
				"desc": "",
				"birthday": "",
				"permission": -1,
				"sex": 0,
				"phone": "",

				"isShowDate": false,
				"isShowSex": false,
				"minDate": new Date(2020, 0, 1),
				"maxDate": new Date(2025, 5, 1),
				"currentDate": ref(['2021', '01', '01']),
				"sexList": [{
						text: '男',
						value: '1'
					},
					{
						text: '女',
						value: '2'
					},
				],
				"headFile": [

				]
			}
		},
		methods: {
			back() {
				this.$router.back()
			},
			formatDate(y, m, d) {
				console.log("格式化");
				return "" + y + "-" + m + "-" + d
			},
			register() {
				let that = this
				console.log("进行 注册 请求");
				if (this.account === "") {
					showToast("请输入账号/电话")
					return
				}
				if (this.password === "") {
					showToast("请输入密码")
					return
				}
				this.$http.register({
						"account": that.account,
						"password": that.password,
						"header": that.header,
						"nick": that.nick,
						"desc": that.desc,
						"birthday": that.birthday,
						"permission": that.permission,
						"sex": that.sex,
						"phone": that.phone,
					})
					.then(function(resp) {
						console.log(resp.data);
						that.$store.commit('login', resp.data.data)
						that.user = that.$store.getters.userInfo
						that.registerSucceed()
					})
					.catch(function(e) {
						console.log(e);
					})
					.then(function() {
						console.log("隐藏loading");
						var user = that.$store.getters.userInfo
						console.log(user);
					})
			},
			registerSucceed() {
				// 直接返回
				this.$router.back()
			},
			changeDate() {
				this.isShowDate = true
			},
			dataConfirm(data) {
				// 关闭对话框
				this.isShowDate = false
				this.birthday = this.formatDate(data.selectedValues[0], data.selectedValues[1], data.selectedValues[2])
			},
			dataCancel(data) {
				// 关闭对话框
				this.isShowDate = false
			},
			dataChange(data) {},
			selectSex() {
				this.isShowSex = true
			},
			sexConfirm(data) {
				this.isShowSex = false
				this.sex = data.selectedValues
			},
			sexCancel(data) {
				this.isShowSex = false
			},
			sexChange(data) {},
			onOversize(f) {
				console.log(file)
				showToast('文件大小不能超过 500kb')
			},
			beforeRead(f) {
				var suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`
				var regular = new RegExp(`.*\.${suffix}`)
				if (!regular.test(f.type)) {
					showToast('请上传图片');
					return false;
				}
				return true;
			},
			asynBeforeRead(f) {
				var suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`
				var regular = new RegExp(`.*\.${suffix}`)
				if (!regular.test(f.type)) {
					showToast('请上传图片');

				} else {

				}
			},
			afterRead(f){
				console.log(file);
			}
		}
	}
</script>

<style>
	.register-container {
		background-color: #f0f0f0;
		height: 100%;
	}

	.input-container {
		margin-top: 40px;
	}

	.btn-container {
		margin-top: 40px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.ic-head {
		width: 50px;
		height: 50px;
	}

	.preview-cover {
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		width: 50px;
		height: 50px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		background: rgba(0, 0, 0, 0.3);
	}
</style>